<template>
  <div class="app-container">
    <div>
      <el-card class="box-card">
        <div style="color: #666;font-size: 13px;">
          <svg-icon icon-class="system" style="margin-right: 5px"/>
          <span>
            项目ID：{{ this.projectDetail.id }}
          </span>
          <span>
            项目名称：{{ this.projectDetail.projectName }}
          </span>
          <span>
            项目负责人：{{ this.projectDetail.ownerUser }}
          </span>
        </div>
      </el-card>
      <el-tabs v-model="activeName" style="padding-left: 8px;" @tab-click="tabClick">
        <el-tab-pane label="服务器管理" name="server">
          <Server :projectId="this.$route.params.id" ref="Server"/>
        </el-tab-pane>
        <el-tab-pane label="软件管理" name="soft">
          <Soft :projectId="this.$route.params.id" ref="Soft"/>
        </el-tab-pane>
        <el-tab-pane label="系统管理" name="system">
          <System :projectId="this.$route.params.id" ref="System"/>
        </el-tab-pane>
        <el-tab-pane label="环境管理" name="environment">
          <Environment :projectId="this.$route.params.id" ref="Environment"/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Server from './server/index'
import Soft from './soft/index'
import System from './system/index'
import Environment from './environment/index'
import project from "@/api/itrms/project";

export default {
  name: 'ProjectDetail',
  components: {Server, Soft, System, Environment},
  data() {
    return {
      activeName: 'server',
      projectId: this.$route.params.id,
      projectDetail: null
    }
  },
  created() {
    this.projectId = this.$route.params.id
    project.detail(this.projectId).then(res => {
      this.projectDetail = res
    })

  },
  methods: {
    tabClick(name) {
      if (this.activeName === 'server') {
        this.$refs.server.crud.toQuery()
      } else {


      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .box-card {
  margin-bottom: 5px;

  span {
    margin-right: 28px;
  }

  .el-icon-refresh {
    margin-right: 10px;
    float: right;
    cursor: pointer;
  }
}
</style>
